<template>
  <dys-search-form
    @search="reload"
    @reset="Object.assign(queryParams, initValue())"
  >
    <a-col :span="6">
      <a-form-item :label="t('年级')">
        <a-input
          v-model:value="queryParams.gradeName"
          :placeholder="t('请输入年级')"
        ></a-input>
      </a-form-item>
    </a-col>
    <a-col :span="6">
      <a-form-item :label="t('班级')">
        <a-input
          v-model:value="queryParams.className"
          :placeholder="t('请输入班级')"
        ></a-input>
      </a-form-item>
    </a-col>
  </dys-search-form>
  <dys-table
    :loading="state.loading"
    :columns="columns"
    :pagination="state.pagination"
    :data-source="state.dataSource"
    default-size="small"
    @reload="reload"
    @change="handleChange"
  >
    <template #extraLeft>
      <a-button type="primary" v-auth:ADD @click="modalState.open = true">
        <PlusCircleOutlined />
        {{ t("新增") }}
      </a-button>
    </template>
    <template #bodyCell="{ column, record, text }">
      <span v-if="column.dataIndex == 'classLeader'">
        {{ record.personName || record.username }}
      </span>
      <span v-else-if="column.dataIndex == 'classStatus'">
        {{ { Y: t("在校"), N: t("毕业") }[text] }}
      </span>
      <template v-if="column.dataIndex == 'operation'">
        <a-button
          type="link"
          size="small"
          @click="
            studentState.model = record;
            studentState.open = true;
          "
        >
          {{ t("学生") }}
        </a-button>
        <a-button
          v-auth:UPDATE
          type="link"
          size="small"
          @click="
            modalState.model = record;
            modalState.open = true;
          "
        >
          {{ t("编辑") }}
        </a-button>
        <a-popconfirm :title="t('确定删除?')" @confirm="handleDelete(record)">
          <a-button v-auth:DELETE type="link" size="small" danger>
            {{ t("删除") }}
          </a-button>
        </a-popconfirm>
      </template>
    </template>
  </dys-table>
  <edit-modal
    :open="modalState.open"
    :model="modalState.model"
    @cancel="
      modalState.model = null;
      modalState.open = false;
    "
    @ok="reload"
  ></edit-modal>
  <student-modal
    :open="studentState.open"
    :model="studentState.model"
    @cancel="
      studentState.model = null;
      studentState.open = false;
    "
  ></student-modal>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";
import { useFetchPage } from "@/hook/useFetchPage";
import { del, queryByPage } from "@/api/answer/base-data/class";
import type { TableColumnsType } from "ant-design-vue";
import type {
  QueryParams,
  QueryResult,
} from "@/api/answer/base-data/class/typing";
import EditModal from "./components/edit-modal.vue";
import StudentModal from "./components/student-modal.vue";
const { t } = useI18n();
const initValue = (): QueryParams => ({
  gradeName: null,
  className: null,
});

const queryParams = reactive(initValue());
const columns = reactive<TableColumnsType>([
  { title: () => t("年级"), dataIndex: "gradeName" },
  { title: () => t("班级"), dataIndex: "classNo" },
  { title: () => t("班级状态"), dataIndex: "classStatus" },
  { title: () => t("班主任"), dataIndex: "classLeader" },
  { title: () => t("班级口号"), dataIndex: "classSlogan" },
  { title: () => t("操作"), dataIndex: "operation", fixed: "right" },
]);
const { state, reload, handleChange } = useFetchPage(queryByPage, {
  params: queryParams,
});
const modalState = reactive({
  open: false,
  model: null,
});
const studentState = reactive({
  open: false,
  model: null,
});
/**删除 */
const handleDelete = async (record: QueryResult) => {
  const { success } = await del({ classId: record.classId });
  if (success) {
    message.success(t("删除成功"));
    reload();
  }
};
</script>
